<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格查询</title>
    <#assign base=request.contextPath  />
    <base id="base" href="${base}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, adminUser-scalable=0">
    <link rel="stylesheet" href="${base}/static/win10/component/layui/css/layui.css" media="all">
    <script>
        var base = "${base}";
    </script>
</head>
<body>
<br>


<div class="demoTable" style="margin-left: 15px;">
    <form class="layui-form " action="">


        <div class="layui-btn-group layui-input-inline">
           <a href="http://localhost:9527/analyse/repairMethod/get/methodRtemplate"><button type="button" class="layui-btn" lay-event="import">模板下载</button></a>
            <button type="button" id="import-all" class="layui-btn" lay-event="import">导入</button>
        </div>

        <div class="layui-input-inline">
            <div class="layui-input-block" style="margin: 0">
                <div class="layui-input-inline" style="width: 160px">
                    <select name="province" lay-filter="province" id="province">
                        <option value="">修理项目大类</option>
                    </select>
                </div>

                <div class="layui-input-inline" style="width: 160px">
                    <select name="city" lay-filter="city" id="city">
                        <option value="">修理子项目</option>
                    </select>
                </div>

                <div class="layui-input-inline" style="width: 160px">
                    <select name="area" lay-filter="area" id="area">
                        <option value="">修理原因及目的</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 160px">
                    <select name="street" lay-filter="street" id="street">
                        <option value="">修理科目</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 160px">
                    <select name="method" lay-filter="method" id="method">
                        <option value="">修理方法</option>
                    </select>
                </div>
            </div>
        </div>
        <button type="button" class="layui-btn layui-input-inline" id="search" data-type="reload">
            <i class="layui-icon layui-icon-search">查询</i>
        </button>
    </form>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <form class="layui-form " action="">
        <div class="layui-input-inline" style="margin-left: 14px">
            <button type="button" class="layui-btn" lay-event="add">数据库维护</button>
            <button type="button" class="layui-btn" lay-event="del">删除</button>
        </div>
        </div>

    </form>
</script>

<script src="${base}/static/win10/component/layui/layui.js?t=1"></script>
<script src="${base}/static/win10/js/jquery-1.8.3.min.js?t=1"></script>
<script>
    layui.use(['table', 'form', 'layer','upload'], function () {

        var form = layui.form
            , layer = layui.layer, table = layui.table,upload = layui.upload;
        var $form = $('form');


        // 设置全局变量以保存选中行信息
        var ids = new Array();
        // 保存当前页全部数据id，点击全选时使用
        var tableIds = new Array();


        //
        var uploadInst = upload.render({
            elem: '#import-all' //绑定元素
            ,url: base+'/analyse/repairMethod/Import/'    //上传接口
            ,accept: "file"
            ,done: function(res){

                if(res.code==200) {

                    //上传完毕回调
                    layer.msg("上传成功!")
                }else {
                    layer.msg(res.message)
                }



            }
            ,error: function(res){
                //请求异常回调
                alert(res.message)
            }
        });






        table.render({
            skin: 'line' //行边框风格
            , even: true //开启隔行背景
            , elem: '#test'
            , url: base + '/analyse/repairMethod/admin/findRepairMethodByPage'
            , toolbar: '#toolbarDemo'
            , cols: [[
                {type: 'checkbox'},
                // {field: 'methodId', title: '修理方法'},
                {field: 'item', title: '修理项目大类'},
                {field: 'child', title: '修理子项目'},
                {field: 'forRepair', title: '修理原因及目的'},
                {field: 'subjects', title: '修理科目'},
                {field: 'method', title: '修理方法'},
                // {field: 'structureId', title: '对应修理方法'},
                // {field: 'methodName', title: '对应的修理原因'},
                {field: 'moreFrequent', title: '发生频度'},
                {field: 'equipment', title: '工具设备'},
                {field: 'consumables', title: '耗材'},
                {field: 'difficulty', title: '修理难度'},
                {field: 'cost', title: '修理费用估计'},
                {field: 'level', title: '修理级别'},
                // {field: 'createTime', title: '创建时间'},
                // {field: 'updateTime', title: '更新时间'}
            ]]
            , page: true
            , id: 'testReload'
            , done: function (res) {

                // 设置当前页全部数据id到全局变量
                tableIds = res.data.map(function (value) {

                    return value.methodId;
                });


                // 设置当前页选中项
                $.each(res.data, function (idx, val) {


                    if (ids.indexOf(val.methodId) > -1) {

                        val["LAY_CHECKED"] = 'true';

                        //找到对应数据改变勾选样式，呈现出选中效果
                        let index = val['LAY_TABLE_INDEX'];


                        $('tr[data-index=' + index + '] input[type="toolbar"]').click();
                        form.render('toolbar'); //刷新toolbar选择框渲染
                    }
                });
                // 获取表格勾选状态，全选中时设置全选框选中
                var checkStatus = table.checkStatus('test');
                if (checkStatus.isAll) {
                    $('.layui-table-header th[data-field="0"] input[type="toolbar"]').prop('checked', true);
                    form.render('toolbar'); //刷新toolbar选择框渲染
                }
            }
        });
        //搜索
        var $1 = layui.$, active = {
            reload: function () {
                console.log('$("#province").val()')
                console.log($("#province").val())
                console.log('$("#province").val()')
                //执行重载
                table.reload('testReload', {

                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        structureId: $("#structureId").val(),
                        methodName: $("#methodName").val(),
                        moreFrequent: $("#moreFrequent").val(),
                        equipment: $("#equipment").val(),
                        consumables: $("#consumables").val(),
                        difficulty: $("#difficulty").val(),
                        cost: $("#cost").val(),
                        level: $("#level").val(),
                        createTime: $("#createTime").val(),
                        updateTime: $("#updateTime").val(),
                        item: $("#province").val(),
                        child: $("#city").val(),
                        forRepair: $("#area").val(),
                        subjects: $("#street").val(),
                        method: $("#method").val()
                    }
                }, 'data');
            }
        };
        $1('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            var data = checkStatus.data;  //获取选中行数据

            var idList = []
            for (let i = 0; i < data.length; i++) {
                idList.push(data[i].methodId)
            }


            switch (obj.event) {
                case 'add':
                    //请继续补充以下逻辑
                    window.location.href = base + "/analyse/repairMethod/admin/addRepairMethodHtml"
                    break;
                case 'edit':
                    if (data.length === 0) {
                        layer.alert("请选择一条数据")
                        return;
                    }
                    //请继续补充以下逻辑
                    window.location.href = base + "/analyse/repairMethod/admin/editRepairMethodHtml?id=" + data[0].methodId
                    break;
                case 'show':
                    if (data.length === 0) {
                        layer.alert("请选择一条数据")
                        return;
                    }
                    //请继续补充以下逻辑
                    window.location.href = base + "/analyse/repairMethod/admin/showRepairMethodHtml?id=" + data[0].methodId
                    break;
                case 'del':
                    if (data.length === 0) {
                        layer.alert("请选择一条数据")
                        return;
                    }
                    layer.confirm('真的要删除吗?', function (index) {
                        $.ajax({
                            type: "GET",
                            url: base + '/analyse/repairMethod/admin/delRepairMethod',
                            data: {"datas": idList},
                            dataType: "json",
                            success: function (data) {
                                if (data.code === 200) {
                                    layer.msg(data.message)
                                    setTimeout(function () {
                                        window.location.reload();
                                    }, 500)
                                } else {
                                    layer.msg(data.message)
                                }
                            }
                        });
                    });
                    break;
            }
            ;
        });
        //监听行双击事件
        table.on('rowDouble(test)', function (obj) {
            var data = obj.data;
            window.location.href = base + "/analyse/repairMethod/admin/showRepairMethodHtml?id=" + data.methodId
        });


        //5级联动 方法调用
        loadProvince();

        form.on('select(province)', function (data) {
            var pid = data.value;

            if (pid.length > 0) {

                loadCity(pid);
            }
        })
        form.on('select(city)', function (data) {
            console.log(data)


            var pid = data.value;
            if (pid.length > 0) {

                loadArea(pid);
            }
        })
        form.on('select(area)', function (data) {
            var pid = data.value;
            if (pid.length > 0) {
                loadStreet(pid);
            }
        })
        form.on('select(street)', function (data) {
            var pid = data.value;
            if (pid.length > 0) {
                loadMethod(pid)
            }

        })

        //加载一级数据
        function loadProvince() {
            var formDate = {
                parentId: 0
            }
            $.ajax({
                type: "POST",
                url: base + "/analyse/repairStructure/admin/getASubset",
                data: formDate,
                success: function (data) {
                    // console.log(data)
                    var clos = data.data;
                    var proHtml = '';
                    for (const p in clos) {
                            proHtml += '<option value="' + clos[p].structureId + '">' + clos[p].structureName + '</option>';
                    }
                    $("#province").append(proHtml);
                    form.render();//菜单渲染 把内容加载进去
                    loadCity(clos[0].structureId);
                }
            });
        }

        //加载二级
        function loadCity(pid) {


            var formDate = {
                parentId: pid
            }
            $.ajax({
                type: "POST",
                url: base + "/analyse/repairStructure/admin/getASubset",
                data: formDate,
                success: function (data) {


                    //
                    // $form.find('select[name=area]').parent().hide();
                    // $form.find('select[name=street]').parent().hide();

                    $("#city").find('option').remove();
                    $("#area").find('option').remove();
                    $("#street").find('option').remove();
                    $("#method").find('option').remove();

                    //console.log(data)
                    var clos = data.data;
                    //    var cityHtml = '<option value="">修理子项目</option>';
                    var cityHtml = '<option value="">修理子项目</option>';

                    for (const p in clos) {
                        cityHtml += '<option value="' + clos[p].structureId + '">' + clos[p].structureName + '</option>';

                    }

                    $("#city").append(cityHtml);

                    //  $form.find('select[name=city]').html(cityHtml).parent().show();

                    form.render();//菜单渲染 把内容加载进去
                    loadArea(clos[0].structureId);
                }
            });
        }

        //加载三级
        function loadArea(pid) {
            var formDate = {
                parentId: pid
            }
            $.ajax({
                type: "POST",
                url: base + "/analyse/repairStructure/admin/getASubset",
                data: formDate,
                success: function (data) {
                    // $form.find('select[name=street]').parent().hide();
                    $("#area").find('option').remove();
                    $("#street").find('option').remove();
                    $("#method").find('option').remove();
                    var clos = data.data;
                    //   var areaHtml = '<option value="">请选择县/区</option>';
                    var areaHtml = '<option value="">修理原因及目的</option>';
                    for (const p in clos) {
                        areaHtml += '<option value="' + clos[p].structureId + '">' + clos[p].structureName + '</option>';
                    }
                    $("#area").append(areaHtml);
                    // $form.find('select[name=area]').html(areaHtml).parent().show();
                    form.render();//菜单渲染 把内容加载进去
                    loadStreet(clos[0].structureId);
                }
            });
        }

        //4级
        function loadStreet(pid) {
            var formDate = {
                parentId: pid
            }
            $.ajax({
                type: "POST",
                url: base + "/analyse/repairStructure/admin/getASubset",
                data: formDate,
                success: function (data) {


                    $("#street").find('option').remove();
                    $("#method").find('option').remove();

                    //console.log(data)
                    var clos = data.data;
                    //  var cityHtml = '<option value="">请选择街道</option>';
                    var cityHtml = '<option value="">修理科目</option>';
                    for (const p in clos) {
                        cityHtml += '<option value="' + clos[p].structureId + '">' + clos[p].structureName + '</option>';
                    }
                    $("#street").append(cityHtml);
                    //  $form.find('select[name=street]').html(cityHtml).parent().show();
                    form.render();//菜单渲染 把内容加载进去
                    loadMethod(clos[0].structureId);
                }
            });
        }

        //5级
        function loadMethod(pid) {
            var formDate = {
                parentId: pid
            }
            $.ajax({
                type: "POST",
                url: base + "/analyse/repairStructure/admin/getASubset",
                data: formDate,
                success: function (data) {


                    $("#method").find('option').remove();

                    //console.log(data)
                    var clos = data.data;
                    //  var cityHtml = '<option value="">请选择街道</option>';
                    var cityHtml = '<option value="">修理方法</option>';
                    for (const p in clos) {
                        cityHtml += '<option value="' + clos[p].structureId + '">' + clos[p].structureName + '</option>';
                    }
                    $("#method").append(cityHtml);
                    //  $form.find('select[name=street]').html(cityHtml).parent().show();
                    form.render();//菜单渲染 把内容加载进去
                }
            });
        }

    })
</script>
</body>
</html>